<template>
    <div :class="$style.loginPage">
        <img :class="$style.logoImg" src="/logo.png" alt="">
        <div :class="$style.titleText">福汇交易所</div>
        <lay-form ref="formRef" :model="formData" :rules="formRules">
            <lay-form-item label="" prop="email" class="mb30">
                <lay-input v-model="formData.email" placeholder="邮箱" prefix-icon="layui-icon-email" :allow-clear="true" @input="writeInp">
                </lay-input>
            </lay-form-item>
            <lay-form-item label="" prop="password" class="mb30">
                <lay-input v-model="formData.password" placeholder="登录密码" prefix-icon="layui-icon-password" :allow-clear="true" type="password" password @input="writeInp">
                </lay-input>
            </lay-form-item>
            <lay-form-item label="" prop="save" class="mb10">
                <lay-checkbox v-model="formData.save" skin="primary" label="记住密码"></lay-checkbox>
            </lay-form-item>
            <lay-form-item class="mb0">
                <lay-button type="primary" :class="[$style.submitBtn, formFlag ? $style.submitBtn2 : $style.submitBtn1]" @click="submitForm">登录</lay-button>
            </lay-form-item>
        </lay-form>
        <div :class="$style.bottomBlock">
            <div :class="$style.bottomLeft" @click="gotoRegister">注册</div>
            <div :class="$style.bottomRight">
                <span :class="$style.bottomText1">忘记密码？</span>
                <span :class="$style.bottomText2" @click="gotoFindPsw">找回</span>
            </div>
        </div>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    name: "Login",
    data() {
        return {
            formData: {
                email: '',
                password: '',
                save: false,
            },
            formRules: {
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { validator: this.validateEmail, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },
            formFlag: false,
        };
    },
    methods: {
        gotoRegister() {
            this.$router.push({ path: '/register' });
        },
        gotoFindPsw() {
            this.$router.push({ path: '/findPsw' });
        },
        submitForm() {
            let that = this;
            that.$refs.formRef.validate(valid => {
                if (valid) {
                    that.formFlag = true;
                    let para = {
                        email: that.formData.email,
                        lpwd: that.formData.password,
                    }
                    let loadIndex = that.$layer.load();
                    that.$axios.post('/api/Login/loginsubmit', para).then((res) => {
                        that.$layer.close(loadIndex);
                        that.$layer.msg(res.data.message, { time: 1000 });
                        if (res.data.code != 200) {
                            return;
                        }
                        window.sessionStorage.setItem('uKey', 1);
                        if (that.formData.save) {
                            let encrypted = that.$cryptoJS.AES.encrypt(JSON.stringify(that.formData), that.$dict.cryptoKey()).toString();
                            window.localStorage.setItem('lKey', encrypted);
                        } else {
                            window.localStorage.setItem('lKey', '');
                        }
                        setTimeout(() => {
                            that.$router.replace({ path: '/' });
                        }, 1000)
                    }).catch((err) => {
                        that.$layer.close(loadIndex);
                        that.$layer.msg('登录失败,请重试', { time: 1000 });
                    });
                } else {
                    this.formFlag = false;
                    return false;
                }
            });
        },
        writeInp() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.formFlag = true;
                } else {
                    this.formFlag = false;
                    return false;
                }
            });
        },
        validateEmail(rule, value, callback) {
            if (this.$dict.regEmail(value)) {
                callback();
            } else {
                callback(new Error('邮箱格式不正确'));
            }
        },
    },
    created() {
        let lKey = window.localStorage.getItem('lKey');
        if (lKey) {
            let bytes = this.$cryptoJS.AES.decrypt(lKey, this.$dict.cryptoKey());
            let decrypted = bytes.toString(this.$cryptoJS.enc.Utf8);
            let info = JSON.parse(decrypted);
            this.formData.email = info.email;
            this.formData.password = info.password;
            this.formData.save = info.save;
            this.formFlag = true;
        }
    },
});
</script>
<style module>
.loginPage {
    width: 100%;
    height: 100vh;
    background-color: #0D1014;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 20px;
    overflow-y: auto;
}

.logoImg {
    display: block;
    width: 130px;
    height: 130px;
}

.titleText {
    width: 100%;
    text-align: center;
    font-family: Source Han Sans;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    color: #FFFFFF;
    margin-bottom: 46px;
}

.submitBtn {
    width: 520px;
    height: 50px;
    color: #000000;
    font-family: Source Han Sans;
    font-size: 20px;
    border-color: rgba(225, 225, 225, 0.1);
}

.submitBtn1 {
    background-color: #D1D5DB;
}

.submitBtn2 {
    background-color: #F7D8A7;
}

.bottomBlock {
    width: 520px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.bottomLeft {
    cursor: pointer;
    font-family: Source Han Sans;
    font-size: 14px;
    color: #FFFFFF;
}

.bottomRight {
    font-family: Source Han Sans;
    font-size: 14px;
    color: #FFFFFF;
}

.bottomText1 {
    opacity: 0.5;
}

.bottomText2 {
    cursor: pointer;
    margin-left: 3px;
}
</style>
<style scoped>
.layui-form-item {
    width: 520px;
    align-items: center;
}

.layui-form-item.mb30 {
    height: 52px;
    margin-bottom: 30px;
}

.layui-form-item.mb10 {
    height: 20px;
    margin-bottom: 10px;
}

.layui-form-item.mb0 {
    margin-bottom: 0px;
}

.layui-input {
    height: 50px;
    background-color: #22252F;
    border-color: rgba(225, 225, 225, 0.1);
}

.layui-input :deep(input) {
    color: #FFFFFF;
}

.layui-input :deep(input::placeholder) {
    color: rgba(255, 255, 255, 0.5);
}

.layui-input :deep(.layui-input-prefix) {
    color: #FFFFFF;
}

.layui-input :deep(.layui-input-clear) {
    color: #FFFFFF;
    opacity: 0.5;
    cursor: pointer;
}

.layui-input :deep(.layui-input-clear:hover) {
    opacity: 1;
}

.layui-input :deep(.layui-input-password) {
    color: #FFFFFF;
    opacity: 0.5;
    cursor: pointer;
}

.layui-input :deep(.layui-input-password:hover) {
    opacity: 1;
}
</style>